import {Typography} from "antd";

import {useRequest} from "ahooks";
import {getComponentStatService} from "../../../services/stat";
import {useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {getComponentConfByType} from "../../../components/QuestionComponents";

type PropsType = {
    selectedComponentId: string
    selectedComponentType: string
}

const {Title} = Typography
export const ChartStat = (props: PropsType) => {
    const {selectedComponentId, selectedComponentType} = props
    const {id = ''} = useParams()
    const [stat, setStat] = useState([])
    const {run} = useRequest(async (questionId, componentId) => await getComponentStatService(questionId, questionId)
        , {
            manual: true,
            onSuccess(res) {
                setStat(res.stat)
            }
        })
    useEffect(() => {
        if (selectedComponentId) run(id, selectedComponentId)
    }, [id, selectedComponentId]);

    function genStatElem() {
        if (!selectedComponentId) return <div>未选中组件</div>
        const {StatComponent} = getComponentConfByType(selectedComponentType) || {};
        if (StatComponent == null) return <div>该组件无统计图表</div>
        return <StatComponent stat={stat}></StatComponent>
    }

    return (
        <>
            <Title level={3}>图表统计</Title>
            <div>{genStatElem()}</div>
        </>
    );
};